<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .avatar{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*border-radius: 10px;*/
            /*border-radius: 50px;*/
            /* 相对单位：50px*/
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 30px;
        }
        /* 椭圆盒子：半径为高度的一半*/
        .box1{
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: red;
            font-size: 18px;
            box-shadow: 1px 1px 3px 1px #cccccc;
            border: 1px solid #000;
            border-radius: 25px;
        }
        .box2{
            margin-top: 20px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: red;
            font-size: 18px;
            box-shadow: 1px 1px 3px 1px #cccccc;
            border: 1px solid #000;

            /* 设置盒子的右上角 右下角 具有一定的弧度*/
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }

        .box3{
            margin-top: 20px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: red;
            font-size: 18px;
            box-shadow: 1px 1px 3px 1px #cccccc;
            border: 1px solid #000;

            /* 左上  右上*/
            /* 如果设置单个角度的圆弧 */
            /*top-left 第一部分 上下（top bottom） 第二部左右（left right）组合 4 top-lefe top-right  bottom-left bottom-right*/
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;

        }
    </style>
</head>
<body>

    <div class="avatar">
        <img src="https://user-gold-cdn.xitu.io/2019/8/12/16c8331d603e005c?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1" alt="">
        <!--<img src="https://sf1-ttcdn-tos.pstatp.com/img/user-avatar/bce60f0d6d1bc92907c435bb69b4f9c1~300x300.image" alt="">-->
    </div>


    <!--椭圆盒子-->
    <div class="box1">日化香精</div>

    <!-- 左侧是直角，右侧是圆弧-->
    <div class="box2">

    </div>

    <!-- 上面出现弧度，下部直角-->
    <div class="box3">

    </div>


</body>
</html>